<script lang="ts" setup>
import { reactive } from "vue";
import axios from 'axios';
import { nanoid } from 'nanoid';
import {useTalkStore} from '@/stores/loveTalk.ts';
defineOptions({
    name: "LoveTalk",
});
//--================= Data
 
const toklStore = useTalkStore();

//--================= Methods
async function getLoveTalk() {
    // let result = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
    // console.log(result.data);
    // // add to list
    // let obj = { id: nanoid(), title: result.data.content }

    // -- 注意下， 这个地方挺有意思的。  可以通过结构式获取数据
    // let {data} = await .......  直接获取返回的 data 数据
    // let { data: { content } } = await  ...进一步结构 data下面的 content 值
    // title 这里是重命名的。
    // nanoid 是个自动生成的不重复的ID，一般用于key 值
    // let obj = { id: nanoid(), title }  这个就是重新构建个对象

    let { data: { content: title } } = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
    let obj = { id: nanoid(), title }
    console.log(obj);
    // unshift 是将这个对象插入到最前面
    toklStore.talklist.unshift(obj)
}
//--================= Other


</script>

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取土味情话</button>
        <ul>
            <li v-for="item  of toklStore.talklist" :key="item.id">
                {{ item.title }}
            </li>
        </ul>
    </div>
</template>

<style scoped>
.talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>
